
<template>
  <ul class="menu">
    <MenuItem
      v-for="item in menuData"
      :key="item.id"
      :item="item"
      :depth="0"
      :active-id="activeItemId"
      @item-click="setActiveItem"
    />
  </ul>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { MenuItemType } from "./types";
import MenuItem from "./MenuItem.vue";

const props = defineProps<{
  menuData: MenuItemType[];
}>();

const activeItemId = ref<number | null>(null); // 当前高亮的菜单项 ID

const setActiveItem = (id: number) => {
  activeItemId.value = id; // 更新高亮状态
};
</script>

<style scoped>
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
}
</style>